<template>
  <div class="w-100 h-100 jcsb" style="display: flex; flex-flow: row nowrap">
    <div
      v-for="item in list"
      :key="item.name"
      style="
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <div class="item">
        <div class="bg"></div>
        <div class="top">
          <img src="@/assets/image/underGround/jcsb_arrow.png" alt="" />
          <span>{{ item.name }}</span>
        </div>
        <div class="center">
          <img :src="item.img" alt="" />
        </div>
        <div class="online">
          <span>在线</span>
          <div>
            <span class="value">{{ item.value[0] }}</span>
            <span>个</span>
          </div>
        </div>
        <div class="linebg"></div>
        <div class="offline">
          <span>离线</span>
          <div>
            <span class="value">{{ item.value[1] }}</span>
            <span>个</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import jcsb_1 from "@/assets/image/underGround/jcsb_1.png";
import jcsb_2 from "@/assets/image/underGround/jcsb_2.png";
import jcsb_3 from "@/assets/image/underGround/jcsb_3.png";
import jcsb_4 from "@/assets/image/underGround/jcsb_4.png";
import jcsb_5 from "@/assets/image/underGround/jcsb_5.png";

const names = [
  "点型光电感烟报警器",
  "点型感温火灾探测器(A2R)",
  "火灾声光报警器",
  "气体释放报警器",
  "手动火灾报警按钮(电话)",
];

const images = [jcsb_1, jcsb_2, jcsb_3, jcsb_4, jcsb_5];

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.jcsb;
  } catch (error) {}
  return data;
});

const list: any = ref([]);

watch(
  () => current.value,
  (val) => {
    if (val) {
      list.value = val.map((value: any, index: number) => ({
        name: names[index],
        img: images[index],
        value,
      }));
    }
  }
);
</script>

<style lang="less" scoped>
.item {
  width: 176px;
  height: 256px;
  position: relative;
  text-align: center;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("@/assets/image/underGround/jcsb_bg.png") no-repeat center
      bottom;
    background-size: 100% auto;
    opacity: 0.5;
  }
  .top {
    padding: 0 20px;
    span {
      font-weight: bold;
      background: -webkit-linear-gradient(0, #51e5f3, #ffffff);
      background: linear-gradient(0, #51e5f3, #ffffff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }
  .center {
    margin: 12px 0;
  }
  .online,
  .offline {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .value {
      font-weight: bold;
      font-size: 32px;
      text-shadow: 0px 1px 4px #72ecec;
    }
  }
  .online {
    .value {
      color: #72ecec;
    }
  }
  .linebg{
    margin: 0 auto;
    height: 1px;
    width: 140px;
    background: linear-gradient( 90deg, rgba(83,255,220,0) 0%, #71FAFF 50%, rgba(91,255,255,0) 100%);
  }
}
</style>
